<template>
	<view class="content">
		<view class="autoview-clz">
			<view class="autoview_0">
				<image src="../../static/image/tital.png" class="autoview_pic"></image>
				<view class="autoview_1">
					<text class="autoview-title">{{ employeeName }}</text>
					<image class="autoview_select" src="../../static/image/select.png" @click="show = true"></image>
					<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
				</view>	
				
			</view>
			<view class="autoview-star">
				<text class="autoview-text">Service attitude:</text>
				<view class="autoview-star-box">
					<image v-for="(item,index) in starsMax" :key="index" :src="(index+1)>attitudeScore?starDefault:starActive" :class="attitudeScore==index+1?'active':''" mode="" @click="setAttitudeScore(index+1)"></image>
				</view>
			</view>
			<view class="autoview-star">
				<text class="autoview-text">Service quality:</text>
				<view class="autoview-star-box">
					<image v-for="(item,index) in starsMax" :key="index" :src="(index+1)>qualityScore?starDefault:starActive" :class="qualityScore==index+1?'active':''" mode="" @click="setQualityScore(index+1)"></image>
				</view>
			</view>
			<view class="autoview-star">
				<text class="autoview-text">In store environment:</text>
				<view class="autoview-star-box">
					<image v-for="(item,index) in starsMax" :key="index" :src="(index+1)>environmentScore?starDefault:starActive" :class="environmentScore==index+1?'active':''" mode="" @click="setEnvironmentScore(index+1)"></image>
				</view>
			</view>
			<view class="text-area">
				<u-input style="padding: 1rem 1rem;" v-model="formData.feedback" :type="type" :border="border" :height="height" :auto-height="autoHeight" placeholder="Please provide feedback and suggestions within 1000 words"/>
			</view>
			<view class="text-tab">
				<view class="flex-row">  
				      <!-- 图标 -->  
				      <image class="icon" src="../../static/image/name.png" mode="widthFix"></image>  
				      <!-- 标题 -->  
				      <text class="title">Name：</text>  
				      <!-- 输入框 -->  
				      <input class="input" v-model="formData.username"  type="text" placeholder="Please fill in"/>  
				    </view>  
			</view>
			
			<view class="text-tab">
				<view class="flex-row">  
				      <!-- 图标 -->  
				      <image class="icon" src="../../static/image/phone.png" mode="widthFix"></image>  
				      <!-- 标题 -->  
				      <text class="title">Phone：</text>  
				      <!-- 输入框 -->  
				      <input class="input" v-model="formData.phone"  type="text" placeholder="Please fill in"/>  
				    </view>  
			</view>
			
			<view class="button-container" :style="{ backgroundImage: 'url(' + backgroundImageUrl + ')' }" type="primary" @click="doSubmit()"></view>
		</view>
		
		<u-popup v-model="showpop" mode="center" width="560rpx" height="288rpx" border-radius="10px">
				<view class="popup-content-gradient">  
				      <!-- 消息文字 -->  
				      <text class="popup-message">{{message}}</text>  
				      <!-- 关闭按钮，这里使用uView的u-button组件，也可以自定义 -->  
				      <u-button class="popup-btn" shape="round"  @click="showpop = false">GOT IT</u-button>  
				    </view>  
		</u-popup>
		
		
	</view>
</template>

<script>
	export default {
		props:{
		
			starsShow:{
				type:[String,Boolean],
				default:true,
			},
			starsMax:{ // 星星最大个数
				type:[String,Number],
				default:5,
			},
			starDefault:{ //未选中
				type:String,
				default:require('@/static/image/star1.png'),
			},
			starActive:{
				type:String,
				default:require('@/static/image/star2.png'),
			},
			score:{  //默认分数
				type:[Number,String],
				default:0
			},
			starsDisabled:{ //是否禁用star
				type:[Boolean],
				default:false
			},
			
			textareaShow:{ // 多行文本显示
				type:[String,Boolean],
				default:true,
			},
			textareaPlaceholder:{
				type:[String],
				default:"宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧"
			},
			
			
			submitShow:{ // 发布按钮
				type:[String,Boolean],
				default:true,
			},
			submitText:{
				type:String,
				default:"发布",
			},
			
			attitudeReceive:{ // 获取值
				type:Object,
				default:function(){
					return {
						score:0,
						textareaValue:""
					}
				}
			},
			qualityReceive:{ // 获取值
				type:Object,
				default:function(){
					return {
						score:0,
						textareaValue:""
					}
				}
			},
			environmentReceive:{ // 获取值
				type:Object,
				default:function(){
					return {
						score:0,
						textareaValue:""
					}
				}
			}
		},
		data() {
			return {
				formData: {  
					feedback: '',  
					username: '',  
					phone:''
				  },  
				showpop: false,
				message:'',
				employeeId: 0,
				employeeName: 'Employee Name',
				type: 'textarea',
				border: false,
				height: 230,
				autoHeight: true,
				list: [],
				show: false,
			}
		},
		onLoad() {
			const that = this;
			
		},
		
		onShow() {
			const that = this;
		},
		
		created() {
			this.fetchData()
		},
		computed:{
			backgroundImageUrl: {
				get() { 
					if (this.employeeId && this.attitudeReceive.score && this.qualityReceive.score && this.environmentReceive.score && this.formData.feedback) 
					{
						return '../static/image/btns.png';
					}else{
						return '../static/image/btn.png';
					}
				}
			},
			attitudeScore(){
				return this.attitudeReceive.score
			},
			qualityScore(){
				return this.qualityReceive.score
			},
			environmentScore(){
				return this.environmentReceive.score
			}
		},
		methods: {
			/**
			 * @name 设置分数
			 */
			setAttitudeScore(score){
				return this.attitudeReceive.score=score
			},
			setQualityScore(score){
				return this.qualityReceive.score=score
			},
			setEnvironmentScore(score){
				return this.environmentReceive.score=score
			},
			confirm(e) {
				this.employeeName = e[0].label;
				this.employeeId = e[0].value;
			},
			// 进行网络请求
			fetchData() {
				const storeid = window.location.href.split("=")[1];
				const that = this;
				let data = {
					storeid: storeid
				}
				that.$api.getUserList(data).then(res => {
					that.list = res.data.data
				}).catch(err => {
					console.log("进行网络请求--失败", err);
				})
			},
			
			/**
			 * @name 提交
			 */
			doSubmit(){
				const that = this;
				const storeid = window.location.href.split("=")[1];
				if(!this.employeeId){
					this.showpop = true;
					this.message = 'Please select the employee ！'
				}else if(!this.attitudeReceive.score){
					this.showpop = true;
					this.message = 'Please select the attitude star rating ！'
				}else if(!this.qualityReceive.score){
					this.showpop = true;
					this.message = 'Please select the quality star rating ！'
				}else if(!this.environmentReceive.score){
					this.showpop = true;
					this.message = 'Please select the environment star rating ！'
				}else if(!this.formData.feedback){
					this.showpop = true;
					this.message = 'Please input the feedback ！'
				}else{
					let obj = {
						staffid: this.employeeId,
						storeid:storeid,
						attitude:this.attitudeReceive.score,
						quality:this.qualityReceive.score,
						environment:this.environmentReceive.score,
						feedback:this.formData.feedback,
						username:this.formData.username,
						phone:this.formData.phone
					}
					console.log(obj)
					that.$api.Submit(obj).then(res => {
						location.reload()
					}).catch(err => {
						console.log("进行网络请求--失败", err);
					})
				}
				
				
			}
		}
	}
</script>

<style>
	@font-face {  
	    font-family: 'Roboto';  
	    src: url('../../static/fonts/Roboto-Black-1.ttf') format('truetype');  
	}  
	.content {
		width: 100%;
		height: 100%;
	}

	.autoview-clz{
		z-index: 1000;
		background-size: contain;
		background-image: url('../../static/image/back.png');
		height: 560rpx;
	}
	.autoview_0{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.autoview_pic{
		left: 22rpx;
		top: 68rpx;
		width: 724rpx;
		height: 144rpx;
		z-index: 0;
	}
	
	.autoview_1{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.autoview-title{
		padding-top: 42rpx;
		font-family: Roboto;
		font-size: 20px;
		color: #333333;
		line-height: 24px;
		font-style: normal;
		margin-right: 26rpx;
	}
	
	.autoview_select{
		padding-top: 42rpx;
		width: 54rpx;
		height: 54rpx;
	}
	
	.autoview-star{
		padding-top: 52rpx;
		padding-left: 46rpx;
		z-index: 0;
	}
	
	.autoview-text{
		font-family: Roboto;
		font-size: 14px;
		color: #333333;
	}
	
	.autoview-star-box{
		display: inline-block;
		
		image{
			width: 100rpx;
			height: 100rpx;
			vertical-align: middle;
			margin-right: 40rpx;
			margin-top: 16rpx;
		}
		image.active{
			animation: star_move ease-in 1 1s,star_rotate ease 1.5s infinite 1s;
		}
	}
	.text-area{
		margin-left: 46rpx;
		margin-top: 52rpx;
		width: 660rpx;
		height: 230rpx;
		background-color: rgb(255 245 248) /* 自定义背景色 */  
	}
	
	.text-tab{
		width: 708rpx;
		padding-left: 46rpx;
		padding-top: 22rpx;
	}
	
	.flex-row {  
	  display: flex; /* 启用Flexbox布局 */  
	  align-items: center; /* 子元素在交叉轴上的对齐方式，这里让子元素在垂直方向上居中对齐 */  
	  justify-content: space-between; /* 子元素在主轴上的对齐方式，这里可以根据需要调整 */  
	}  
	  
	.icon {  
	  width: 62rpx; /* 设置图标的宽度，根据实际需要调整 */  
	  height: 62rpx; /* 设置图标的高度，根据实际需要调整 */  
	  margin-right: 10rpx; /* 设置图标与标题之间的间距 */  
	}  
	  
	.title {  
	  /* 这里可以根据需要设置标题的样式 */  
	  font-family: Roboto;
	  font-size: 14px;
	  margin-right: 10px; /* 设置标题与输入框之间的间距 */  
	}  
	  
	.input {  
	  /* 这里可以根据需要设置输入框的样式 */  
	  flex: 1; /* 让输入框占据剩余的空间 */  
	  height: 84rpx;
	  border-radius: 20rpx;
	  font-size: 12px;
	  font-family: Roboto;
	  color: rgba(51,51,51,0.3);
	  text-align: center;
	  background-color: rgb(255 245 248) /* 自定义背景色 */  
	}  
	
	.button-container {  
		margin-top: 60rpx;
		margin-left: 116rpx;
		width: 520rpx;
		height: 120rpx; /* 举例 */ 
		background-image: url('../../static/image/btn.png'); /* 注意路径 */  
		background-size: cover; /* 覆盖整个容器 */  
		/* 根据需要设置其他样式 */  
		display: flex;  
		justify-content: center;  
		align-items: center;  
		border-radius: 5px; /* 圆角 */  
		/* 隐藏button的默认背景 */  
		button {  
			width: 520rpx;
			height: 120rpx;
			background: transparent;  
			border: none;  
			color: #fff; /* 根据背景图片调整文字颜色 */  
		}  
	}  
	
	.popup-content-gradient {  
	  background: linear-gradient( 180deg, #F0D3DB 0%, #FFFFFF 100%), #FFFFFF;
	  border-radius: 38px;
	  backdrop-filter: blur(4.923076923076923px);
	  border-radius: inherit; /* 如果需要的话，继承u-popup的border-radius */  
	  padding: 20px; /* 根据需要调整内边距 */  
	  display: flex;  
	  flex-direction: column; /* 垂直排列内容 */  
	  align-items: center; /* 水平居中 */  
	  justify-content: space-between; /* 垂直方向上，消息和按钮之间有间隔 */  
	  height: 100%; /* 根据需要调整，如果不需要填满整个popup可以省略 */  
	  box-sizing: border-box; /* 包括padding和border在元素的总宽度和高度内 */  
	}  
	  
	.popup-message {  
	  /* 消息文字的样式，根据需要自定义 */  
	  color: #333333; /* 假设渐变背景较暗，需要白色文字 */  
	  font-size: 16px; /* 字体大小 */  
	  font-family: Roboto;
	  margin-bottom: 10px; /* 消息文字和关闭按钮之间的间隔 */  
	}  
	
	.popup-btn{
		width: 316rpx;
		height: 76rpx;
		color: #333333; 
		font-size: 16px; /* 字体大小 */
		font-family: Roboto;
		background-color: #FF9DB7;
		border-radius: 38px;
		
		&::after {
				border: none;
			}

	}
	
	@keyframes star_move{
		from{
			width: 100rpx;
			height: 100rpx;
			transform: rotate(180deg)
		}
		to{
			width: 100rpx;
			height: 100rpx;
			transform: rotate(0)
		}
	}
	@keyframes star_rotate{
		0%{
			transform: rotateY(360deg)
		}
		100%{
			transform: rotateY(180deg)
		}
	}
</style>
